<template>
  <div class="twui-echarts">
    <div
        ref="echarts"
        :id="id"
        class="twui-echarts__container"
        :class="{'twui-echarts__container--nodata':noData}"
        :style="{height:height}"
        >
    </div>
    <div class="twui-echarts__container nodata_container"
         v-if="this.noData"
         :style="{height:height}">
      <div class="nodata__content">
        <img src="/static/twecobigscreen/images/enodata.png" alt="nodata">
        <p>暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script scoped>
import echarts from 'echarts'
import { Option } from '@/assets/echarts/Option.js'
import axios from 'axios'

export default{
  props: ['id', 'height', 'additionalOptions'],
  data: function () {
    return {
      echartsOption: {},
      noData: false
    }
  },
  methods: {
    resizeChart () {
      let temp = document.getElementById(this.id)
      if (temp) {
        if (temp.offsetWidth === 0) {
          setTimeout(() => { this.resizeChart() }, 200)
        }
        let myChart = echarts.init(document.getElementById(this.id))
        myChart.resize()
      } else {
        setTimeout(() => { this.resizeChart() }, 200)
      }
    },
    rebuildChart () {
      let keys = Object.keys(this.additionalOptions)
      let myChart = document.getElementById(this.id)
      myChart = echarts.init(myChart)
      if (keys.find(e => e === 'loadMap')) {
        console.log('map exittt')
        axios.get('/static/twecobigscreen/maps/json/china-cities.json')
          .then((response) => {
            let tempMap = {
              'type': 'FeatureCollection',
              'UTF8Encoding': true,
              'features': []
            }
            let cities = response.data.features
            cities.forEach((p1) => {
              if (p1.properties.name === '合肥') {
                console.log(p1)
                tempMap['features'].push(p1)
                echarts.registerMap('china1', tempMap)
              }
            })
            console.log('china1', response)
            // echarts.registerMap('china1', response.data)
            if (keys.length > 0) {
              this.echartsOption = new Option(this.id, this.additionalOptions).getOption()
              myChart.hideLoading()
              myChart.setOption(this.echartsOption)
              this.$emit('finishCharts', '渲染完成')
            } else {
              myChart.hideLoading()
              this.noData = true
            }
          })
          .catch((error) => {
            console.log(error)
          })
      } else if (keys.length > 0) {
        this.echartsOption = new Option(this.id, this.additionalOptions).getOption()
        myChart.hideLoading()
        myChart.setOption(this.echartsOption)
        this.$emit('finishCharts', '渲染完成')
      } else {
        myChart.hideLoading()
        this.noData = true
      }
    }
  },
  mounted: function () {
    this.$watch('additionalOptions', function () {
      // 监听数值的变化，变化后通知echarts进行刷新
      this.rebuildChart()
    }, { deep: true })
    let myChart = document.getElementById(this.id)
    myChart = echarts.init(myChart)
    myChart.showLoading()
  }
}
</script>

<style scoped></style>
